<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="Captain Chen">
    <meta name="Keywords" content="Sudoku">
    <title>Captain Chen's Web Sudoku</title>
    <script src="./static/jquery-3.6.0.min.js"></script>
    <style type=text/css>
        table {
            border: 2px solid black
        }

        td {
            width: 10mm;
            height: 10mm;
            text-align: center;
            font-size: xx-large;
            background-color: #eeeeee;
        }

        .rightBolder {
            border-right: 2px solid black
        }

        .bottomBolder {
            border-bottom: 2px solid black
        }

        .zeroCell {
            color: rgb(0, 255, 0);
            font-weight: bold;
            background-color: rgb(0, 110, 255)
        }

        .errorCell {
            color: rgb(255, 187, 0);
            font-weight: bold;
            background-color: rgba(255, 0, 0, 0.644)
        }

        .button.red {
            border: 1px solid #b42323;
            box-shadow: 0 1px 2px #e99494 inset, 0 -1px 0 #954b4b inset, 0 -2px 3px #e99494 inset;
            background: -webkit-linear-gradient(top, #d53939, #b92929);
            background: -moz-linear-gradient(top, #d53939, #b92929);
            background: linear-gradient(top, #d53939, #b92929);
        }

        .red:hover {
            background: -webkit-linear-gradient(top, #eb6f6f, #c83c3c);
            background: -moz-linear-gradient(top, #eb6f6f, #c83c3c);
            background: linear-gradient(top, #eb6f6f, #c83c3c);
            cursor: pointer;
        }

        .red:active {
            top: 1px;
            box-shadow: 0 1px 3px #5b0505 inset, 0 3px 0 #ffffff00;
            background: -webkit-linear-gradient(top, #b11a1a, #bf2626);
            background: -moz-linear-gradient(top, #b11a1a, #bf2626);
            background: linear-gradient(top, #b11a1a, #bf2626);
        }

        .button.gray {
            color: #8c96a0;
            text-shadow: 1px 1px 1px #fff;
            border: 1px solid #dce1e6;
            box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
            background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: linear-gradient(top, #f2f3f7, #e4e8ec);
        }

        #submit_button {
            position: relative;
            left: 12cm;
            top: -6cm;
            width: 140px;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            font-size: large;
            color: #ffffff;
            text-shadow: 1px 1px 1px #333;
            border-radius: 5px;
            margin: 0 20px 20px 0;
            overflow: hidden;
        }
    </style>
</head>

<body style="width:800px;margin:0px auto;">
    <table cellpadding='0' cellspacing='0' border='1'>
        <tr>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_00' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_01' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_02' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_03' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_04' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_05' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_06' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_07' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_08' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
        <tr>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_10' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_11' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_12' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_13' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_14' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_15' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_16' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_17' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_18' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
        <tr>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_20' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_21' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder bottomBolder'>
                <div class='input_cell' id='input_cell_22' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_23' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_24' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder bottomBolder'>
                <div class='input_cell' id='input_cell_25' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_26' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_27' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_28' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
        <tr>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_30' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_31' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_32' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_33' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_34' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_35' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_36' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_37' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_38' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
        <tr>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_40' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_41' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_42' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_43' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_44' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_45' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_46' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_47' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_48' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
        <tr>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_50' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_51' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder bottomBolder'>
                <div class='input_cell' id='input_cell_52' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_53' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_54' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder bottomBolder'>
                <div class='input_cell' id='input_cell_55' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_56' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_57' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell bottomBolder'>
                <div class='input_cell' id='input_cell_58' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
        <tr>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_60' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_61' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_62' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_63' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_64' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_65' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_66' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_67' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_68' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
        <tr>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_70' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_71' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_72' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_73' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_74' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_75' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_76' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_77' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_78' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
        <tr>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_80' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_81' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_82' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_83' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_84' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell rightBolder'>
                <div class='input_cell' id='input_cell_85' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_86' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_87' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
            <td class='zeroCell'>
                <div class='input_cell' id='input_cell_88' contenteditable='True'
                    style='max-width:10mm;max-height:10mm;overflow:hidden'></div>
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".input_cell").blur(update);
            $("#submit_button").click(submit_data);
        });

        function check_row(data) {
            var tag = true;
            var vis = new Array(10);
            for (var i = 0; i < 9; i++) {
                for (var k = 0; k <= 9; k++)
                    vis[k] = -1;
                for (var j = 0; j < 9; j++)
                    if (data[i * 9 + j] != 0) {
                        if (vis[data[i * 9 + j]] != -1) {
                            setErrorCell(i * 9 + j);
                            setErrorCell(vis[data[i * 9 + j]]);
                            tag = false;
                        }
                        vis[data[i * 9 + j]] = i * 9 + j;
                    }
            }
            return tag;
        }
        function check_col(data) {
            var tag = true;
            var vis = new Array(10);
            for (var j = 0; j < 9; j++) {
                for (var k = 0; k <= 9; k++)
                    vis[k] = -1;
                for (var i = 0; i < 9; i++)
                    if (data[i * 9 + j] != 0) {
                        if (vis[data[i * 9 + j]] != -1) {
                            setErrorCell(i * 9 + j);
                            setErrorCell(vis[data[i * 9 + j]]);
                            tag = false;
                        }
                        vis[data[i * 9 + j]] = i * 9 + j;
                    }
            }
            return tag;
        }
        function check_diag(data) {
            var tag = true;
            var vis = new Array(10);
            for (var k = 0; k <= 9; k++)
                vis[k] = -1;
            for (var i = 0; i < 9; i++)
                if (data[i * 9 + i] != 0) {
                    if (vis[data[i * 9 + i]] != -1) {
                        setErrorCell(i * 9 + i);
                        setErrorCell(vis[data[i * 9 + i]]);
                        tag = false;
                    }
                    vis[data[i * 9 + i]] = i * 9 + i;
                }
            for (var k = 0; k <= 9; k++)
                vis[k] = -1;
            for (var i = 0; i < 9; i++) {
                var j = 8 - i;
                if (data[i * 9 + j] != 0) {
                    if (vis[data[i * 9 + j]] != -1) {
                        setErrorCell(i * 9 + j);
                        setErrorCell(vis[data[i * 9 + j]]);
                        tag = false;
                    }
                    vis[data[i * 9 + j]] = i * 9 + j;
                }
            }
            return tag;
        }
        function check_blk(data) {
            var tag = true;
            var vis = new Array(10);
            for (var i = 0; i < 9; i++) {
                for (var k = 0; k <= 9; k++)
                    vis[k] = -1;
                for (var j = 0; j < 9; j++) {
                    var x = Math.floor(i / 3) * 3 + Math.floor(j / 3);
                    var y = (i % 3) * 3 + (j % 3);
                    var s = x * 9 + y;
                    if (data[s] != 0) {
                        if (vis[data[s]] != -1) {
                            setErrorCell(s);
                            setErrorCell(vis[data[s]]);
                            tag = false;
                        }
                        vis[data[s]] = s;
                    }
                }
            }
            return tag;
        }
        function reset_cell(data) {
            $(".input_cell").removeClass("errorCell");
        }
        function setErrorCell(id) {
            x = Math.floor(id / 9); y = id % 9;
            str = "#input_cell_" + x + y;
            $(str).addClass("errorCell");
        }
        function getData() {
            var cells = document.getElementsByClassName("input_cell");
            var data = new Array(81);
            for (var i = 0; i < 81; i++)
                data[i] = 0;
            for (var i = 0; i < cells.length; i++) {
                var x = parseInt(cells[i].id.slice(-2, -1));
                var y = parseInt(cells[i].id.slice(-1));
                var id = x * 9 + y;
                var t = cells[i].innerHTML;
                if (t.length > 0)
                    data[id] = parseInt(t);
            }
            return data;
        }
        function check_sudo() {
            var data = getData();
            reset_cell();
            var tag = true;
            if (!check_row(data))
                tag = false;
            if (!check_col(data))
                tag = false;
            //if (!check_diag(data))
            //    tag = false;
            if (!check_blk(data))
                tag = false;
            var cnt = 0;
            for (var i = 0; i < 81; i++)
                if (data[i] != 0)
                    cnt++;
            if (cnt == 0)
                tag = false;
            return tag;
        }


        function update() {
            var s = $(this).text();
            s = s.slice(-1);
            if (s.length > 0 && (isNaN(s) || parseInt(s) == 0)) {
                $(this).html("");
                alert("只能输入1~9的数字")
            }
            else
                $(this).html(s);
            if (check_sudo()) {
                $("#submit_button").removeAttr("disabled");
                $("#submit_button").addClass("red").removeClass("gray");
            }
            else {
                $("#submit_button").addClass("gray").removeClass("red");
                $("#submit_button").attr("disabled", "disabled");
            }
        }
        function submit_data() {
            var data = getData();
            $.post("/save_data", { data: data.toString() }, function (ret) {
                alert(ret);
                if (ret == "Save Success!")
                    $(".input_cell").html("");
            });
        }
    </script>
    <button id="submit_button" type="submit" class="button gray" disabled="disabled">提交数据</button>
</body>

</html>